<template>
  <div class="reportFormsSwapper zy-content conAnimateBack">
    <div class="searchSwapper">
      <Row>
        <Col span="6" class="item">
          <Col span="6" class="name">
            <span>{{$t('preliminary.EquipmentType')}}：</span>
          </Col>
          <Col span="16" class="contentSelect">
            <Select v-model="deviceType" filterable clearable @on-open-change="deviceTypeData()">
              <Option
                v-for="(item,index) of deviceTypeList"
                :value="item.deviceType"
                :key="index"
              >{{ item.deviceTypeName }}</Option>
            </Select>
          </Col>
        </Col>
        <Col span="6" class="item">
          <Col span="6" class="name">
            <span>{{$t('doc.download')}}</span>
          </Col>
          <Col span="16" class="contentSelect">
            <Input class="inputfree" v-model="description" :maxlength="20" :placeholder="`${$t('common.inputInfo')}`"/>
          </Col>
        </Col>
        <Col span="1" align="right">
          <Button type="primary" @click="clickSearchBtn">{{$t('common.Query')}}</Button>
        </Col>
      </Row>
    </div>
    <div class="btns clear">
      <div class="item" @click="exportTemplate">
        <i class="iconfont qtch-jihuamobanxiazai putOut"></i>
        <span>{{$t('common.Export')}}</span>
      </div>
    </div>
    <div class="tableContent">
      <Table :columns="columns" :data="data"></Table>
    </div>
    <div class="pages">
      <Page
        :total="pageParams.total"
        :page-size="pageParams.pageSize"
        :current="pageParams.pageNum"
        @on-change="changePageNum"
        @on-page-size-change="pageSizeChange"

        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
// import { Row, Col, Select, Option, Input, Button } from "iview-de";

export default {
  name: "repairKnowledgeBase",
  // components: {
  //   Row,
  //   Col,
  //   Select,
  //   Option,
  //   Input,
  //   Button
  // },
  data() {
    return {
      /*表格*/
      loadingQuey: false,
      description: "",
      deviceType: "",
      deviceTypeList: [],
      getItemNoList: [],
      pageParams: {
        pageNum: 1,
        total: 0,
        pageSize: 10
      },
      data: [],
      columns: [
        {
          //title: "设备类型",
          title: `${this.$t('preliminary.EquipmentType')}`,
          align: "center",
          key: "deviceType"
        },
        {
          //title: "故障代码",
          title: `${this.$t('preliminary.errorCode')}`,
          align: "center",
          key: "problemCode"
        },
        {
          //title: "故障描述",
          title: `${this.$t('preliminary.download')}`,
          align: "center",
          key: "processingDescription"
        },
        {
          //title: "处理方式",
          title: `${this.$t('preliminary.Processing')}`,
          align: "center",
          key: "disposeWay"
        }
      ]
    };
  },
  mounted() {
    this.SearchClick();
  },
  methods: {
    deviceTypeData() {
      let params = {
        hierarchyCode: "",
        groupId: ""
      };
      this.axios({
        method: "get",
        url: "/dms/unplanned/getDeviceType",
        params
      }).then(res => {
        if (res.code === 200) {
          let arr = [
            {
              id: "",
              deviceType: "",
              deviceTypeName: "全部"
            }
          ];
          for (let key of res.data) {
            let obj = {};
            obj.id = key.id;
            obj.deviceTypeName = key.deviceTypeName;
            obj.deviceType = key.deviceType;
            arr.push(obj);
          }
          this.deviceTypeList = arr;
        } else {
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      });
    },
    clickSearchBtn() {
      this.pageNum = 1;
      this.SearchClick();
    },
    SearchClick() {
      this.spinShow = true;
      let params = {
        pageNum: this.pageParams.pageNum,
        pageSize: this.pageParams.pageSize
      };
      params.deviceType = this.deviceType;
      params.description = this.description;
      let url;
      url = "/dms/maintenanceKnowledgeBase/findlist";
      this.axios({
        method: "post",
        url: url,
        data: params
      }).then(res => {
        if (res.code === 200) {
          this.spinShow = false;
          if (res.data.list) {
            this.data = res.data.list;
            this.pageParams.total = res.data.total;
          } else {
            this.data = [];
          }
        } else {
          this.spinShow = false;
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      });
    },
    changePageNum(pageNum) {
      this.pageParams.pageNum = pageNum;
      this.clickSearchBtn();
    },
    pageSizeChange(pageSize) {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = pageSize;
      this.clickSearchBtn();
    },
    exportTemplate() {
      let params = {};
      if (
        this.deviceType != null &&
        this.deviceType != "" &&
        this.deviceType != undefined
      ) {
        params.deviceType = this.deviceType;
      } else {
        params.deviceType = "";
      }
      if (
        this.description != null &&
        this.description != "" &&
        this.description != undefined
      ) {
        params.description = this.description;
      } else {
        params.description = "";
      }

      let downFileUrl;
      var token = localStorage.getItem("ziyunFactoryPortalToken");

      downFileUrl =
        "/dms/maintenanceKnowledgeBase/export?token=" + token;

      for (let key in params) {
        downFileUrl =
          downFileUrl + "&" + key + "=" + encodeURIComponent(params[key]);
      }
      window.open(downFileUrl, "_self ");
    }
  }
};
</script>

<style scoped lang="scss">
.reportFormsSwapper {
  .searchSwapper {
    margin-top: 10px;
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
  }

  .btns {
    height: 60px;
    line-height: 60px;

    .item {
      float: right;
      margin-right: 24px;

      i {
        display: inline-block;
        cursor: pointer;
        font-size: 25px;

        &.putOut {
          color: #ffb900;
        }
      }

      span {
        cursor: pointer;
        margin-top: -10px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        color: #555;
      }
    }
  }

  .tableContent {
    margin-top: 6px;
  }

  .pages {
    text-align: center;
    margin-top: 30px;
  }
}
</style>
<style lang="scss">
.reportFormsSwapper {
  .searchSwapper {
    .ivu-input {
      border: 1px solid #dcdee2;
    }
  }
}
</style>
